<template>
  <div class="myself">
    <div class="main">
      <div class="my-info">
        <div class="header">
          <h3>个人信息卡片</h3>
          <el-form>
            <el-form-item>
              <el-button type="success" @click="router.push(`/addMyInfo/${-1}`)">
                <el-icon><Plus /></el-icon>
                <span>新增</span>
              </el-button>
            </el-form-item>
          </el-form>
        </div>
        <el-table :data="myInfoList">
          <el-table-column label="昵称" prop="name" width="100"></el-table-column>
          <el-table-column label="头像" prop="headerUrl" width="70">
            <template #default="scope">
              <el-avatar :src="scope.row.headerUrl"></el-avatar>
            </template>
          </el-table-column>
          <el-table-column label="简介" prop="desc" show-overflow-tooltip></el-table-column>
          <el-table-column label="故事" prop="story" show-overflow-tooltip></el-table-column>
          <el-table-column label="三方社交链接">
            <template #default="scope">
              <el-dropdown>
                <span class="el-dropdown-link">三方社交链接</span>
                <el-icon>
                  <ArrowDown />
                </el-icon>
                <template #dropdown>
                  <el-dropdown-item v-for="item in scope.row.socialList" :key="item.id">
                    <el-image :src="item.icon" style="width: 24px; height: 24px"></el-image>
                    <p style="color: #86cef0; margin-right: 10px">{{ item.name }}</p>
                    <p>{{ item.contactInfo }}</p>
                  </el-dropdown-item>
                </template>
              </el-dropdown>
            </template>
          </el-table-column>
          <el-table-column label="状态" width="55" prop="status">
            <template #default="scope">
              <span
                :class="scope.row.status === 0 ? 'blue' : 'red'"
                @click="updtaeMyInfoStatus(scope.row.id, scope.row.status === 0 ? 1 : 0)"
              >
                {{ scope.row.status === 0 ? '启用' : '禁用' }}</span
              >
            </template>
          </el-table-column>
          <el-table-column label="创建时间" prop="createTime" width="160"></el-table-column>
          <el-table-column label="修改时间" prop="updateTime" width="160"></el-table-column>
          <el-table-column label="操作">
            <template #default="scope">
              <el-button
                :text="true"
                type="primary"
                size="small"
                @click="router.push(`/addMyInfo/${scope.row.id}`)"
                >编辑</el-button
              >
              <el-button :text="true" type="success" size="small" @click="getMyInfo(scope.row.id)"
                >查看</el-button
              >
              <el-button
                :text="true"
                type="danger"
                size="small"
                @click="deleteByMyInfoId(scope.row.id)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <el-dialog v-model="dialogVisible">
          <el-descriptions direction="vertical" border title="个人信息">
            <el-descriptions-item :rowspan="2" :width="140" label="头像" align="center">
              <el-image style="width: 100px; height: 100px" :src="myInfo.headerUrl"></el-image>
            </el-descriptions-item>
            <el-descriptions-item label="昵称">{{ myInfo.name }}</el-descriptions-item>
            <el-descriptions-item label="简介">{{ myInfo.desc }}</el-descriptions-item>
            <el-descriptions-item label="故事"
              >{{ myInfo.story && myInfo.story.slice(0, 190) }}...</el-descriptions-item
            >
          </el-descriptions>
        </el-dialog>
      </div>
      <div class="every-day-word">
        <div class="header">
          <h3>每日一言</h3>
          <el-form :inline="true">
            <el-form-item>
              <el-button type="danger" @click="deleteWordsBatch">批量删除</el-button>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="sayEveryWord">说一说</el-button>
            </el-form-item>
          </el-form>
        </div>
        <el-table :data="everyDayWord" @selection-change="handleSelectionChange">
          <el-table-column type="selection" width="50"></el-table-column>
          <el-table-column label="一言" prop="word"></el-table-column>
          <el-table-column label="状态" width="70" prop="status">
            <template #default="scope">
              <span
                :class="scope.row.status === 0 ? 'blue' : 'red'"
                @click="updateEveryWordStatus(scope.row.id, scope.row.status === 0 ? 1 : 0)"
              >
                {{ scope.row.status === 0 ? '启用' : '禁用' }}
              </span>
            </template>
          </el-table-column>
          <el-table-column label="创建时间" width="160" prop="createTime"></el-table-column>
          <el-table-column label="修改时间" width="160" prop="updateTime"></el-table-column>
          <el-table-column label="操作" width="190">
            <template #default="scope">
              <el-button :text="true" type="primary" size="small" @click="updateWord(scope.row.id)"
                >编辑</el-button
              >
              <el-button :text="true" type="danger" size="small" @click="deleteWord(scope.row.id)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <el-dialog v-model="everyDayDialogVis" width="520">
          <el-form>
            <el-form-item label="一言">
              <el-input
                placeholder="说一说"
                type="textarea"
                maxlength="42"
                show-word-limit
                v-model="word"
              ></el-input>
            </el-form-item>
          </el-form>
          <template #footer>
            <el-button @click="everyDayDialogVis = false">Cannal</el-button>
            <el-button type="primary" @click="lssueWord">发布</el-button>
          </template>
        </el-dialog>
      </div>
      <div class="social">
        <h3>社交信息</h3>
        <el-table :data="socialList">
          <el-table-column label="图标">
            <template #default="scope">
              <el-image :src="scope.row.icon" style="width: 36px; height: 36px"></el-image>
            </template>
          </el-table-column>
          <el-table-column label="昵称" prop="name"></el-table-column>
          <el-table-column
            label="联系方式"
            prop="contactInfo"
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column label="备注" prop="remarks"></el-table-column>
          <el-table-column label="状态" prop="status">
            <template #default="scope">
              <span :class="scope.row.status === 0 ? 'blue' : 'red'">{{
                scope.row.status === 0 ? '启用' : '禁用'
              }}</span>
            </template>
          </el-table-column>
          <el-table-column label="创建时间" prop="createTime"></el-table-column>
          <el-table-column label="修改时间" prop="updateTime"></el-table-column>
          <el-table-column label="操作">
            <template #default="scope">
              <el-button :text="true" size="small" type="primary">编辑</el-button>
              <el-button :text="true" size="small" type="danger">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>

<script setup>
import { onMounted, ref } from 'vue'
import { ArrowDown, Plus } from '@element-plus/icons-vue'
import {
  addEveryDayWordService,
  deleteByMyInfoIdService,
  deleteEveryWordBatchService,
  getEveryDayService,
  getEveryWordByIdService,
  getMyInfoByIdService,
  getMyInfoListService,
  getMySocialListService,
  updateEveryWordService,
  updateMyInfoStatusService,
  updtaeEveryWordStatusService,
} from '@/api/MyInfo'
import { useRouter } from 'vue-router'
import { ElMessage, ElMessageBox } from 'element-plus'

const router = useRouter()

// 个人卡片信息
const myInfoList = ref([])
const dialogVisible = ref(false)
const myInfo = ref({})
// 每日一言信息
const everyDayWord = ref([{}])
const everyDayDialogVis = ref(false)
const word = ref('')
const updateWordQuery = ref({
  id: '',
  word: '',
})
// 社交信息
const socialList = ref([])

/**
 * 获取个人卡片信息列表
 */
const getMyInfoList = async () => {
  const { data } = await getMyInfoListService()
  myInfoList.value = data
}
/**
 * 获取每日一言信息列表
 */
const getEveryWord = async () => {
  const { data } = await getEveryDayService()
  everyDayWord.value = data
}
/**
 * 获取个人社交信息
 */
const getSocialList = async () => {
  const { data } = await getMySocialListService()
  socialList.value = data
}
/**
 * 查看个人卡片详细信息
 * @param id
 */
const getMyInfo = async (id) => {
  dialogVisible.value = true
  const { data } = await getMyInfoByIdService(id)
  myInfo.value = data
}
/**
 * 修改个人信息状态
 * @param id
 * @param status
 */
const updtaeMyInfoStatus = (id, status) => {
  updateMyInfoStatusService({
    id: id,
    status: status,
  }).then(() => {
    getMyInfoList()
  })
}
const updateEveryWordStatus = (id, status) => {
  updtaeEveryWordStatusService(id, status).then(() => {
    getEveryWord()
  })
}
/**
 * 删除个人信息
 * @param id
 */
const deleteByMyInfoId = (id) => {
  ElMessageBox.confirm('你确认要删除这条信息吗?', 'Tip', {
    type: 'warning',
    cancelButtonText: '取消',
    confirmButtonText: '确认',
  }).then(() => {
    deleteByMyInfoIdService(id).then(() => {
      getMyInfoList()
    })
  })
}

const sayEveryWord = async () => {
  everyDayDialogVis.value = true
  if (updateWordQuery.value.id !== '') {
    const { data } = await getEveryWordByIdService(updateWordQuery.value.id)
    word.value = data.word
  }
}

/**
 * 发布每日一言
 */
const lssueWord = () => {
  if (word.value === '') {
    ElMessage.warning('内容不能为空')
    return false
  }
  if (updateWordQuery.value.id === '') {
    addEveryDayWordService(word.value).then(() => {
      word.value = ''
      everyDayDialogVis.value = false
      getEveryWord()
    })
  } else {
    updateWordQuery.value.word = word.value
    console.log(updateWordQuery.value)
    // 修改每日一言
    updateEveryWordService(updateWordQuery.value).then(() => {
      everyDayDialogVis.value = false
      getEveryWord()
    })
  }
}
/**
 * 删除每日一言
 * @param id
 */
const wordIds = ref([])
const deleteWord = (id) => {
  ElMessageBox.confirm('你确认删除这条一言吗?', 'Tip', {
    type: 'warning',
    cancelButtonText: '取消',
    confirmButtonText: '确认',
  }).then(() => {
    wordIds.value.push(id)
    deleteEveryWordBatchService(wordIds.value).then(() => {
      for (let i = 0; i < wordIds.value.length; i++) {
        if (wordIds.value[i] === id) {
          wordIds.value.splice(i, 1)
          i--
        }
      }
      getEveryWord()
    })
  })
}
const handleSelectionChange = (row) => {
  const obj = JSON.parse(JSON.stringify(row))
  wordIds.value = []
  obj.forEach((item) => {
    wordIds.value.push(item.id)
  })
}
// 批量删除
const deleteWordsBatch = () => {
  if (wordIds.value.length === 0) {
    ElMessage.error('未选中任何数据')
    return false
  }
  ElMessageBox.confirm(`你确认删除这${wordIds.value.length}条数据吗?`, 'Tip', {
    cancelButtonText: '取消',
    confirmButtonText: '确认',
  })
    .then(() => {
      deleteEveryWordBatchService(wordIds.value).then(() => {
        wordIds.value = []
        getEveryWord()
      })
    })
    .catch(() => {
      ElMessage.success('取消删除')
    })
}

const updateWord = (id) => {
  updateWordQuery.value.id = id
  sayEveryWord()
}

onMounted(() => {
  getMyInfoList()
  getEveryWord()
  getSocialList()
})
</script>

<style lang="scss" scoped>
.myself {
  padding: 15px;
  background-color: #f3f4f5;

  .main {
    min-height: 100vh;
    padding: 20px;
    background-color: #fff;
    border-radius: 7px;

    .my-info {
      margin: 20px 0px;

      .header {
        display: flex;
        justify-content: space-between;
      }

      .el-dropdown-link {
        outline: none;
        cursor: pointer;
        color: var(--el-color-primary);
        display: flex;
        align-items: center;
      }
    }

    .every-day-word {
      margin: 20px 0;
      .header {
        display: flex;
        justify-content: space-between;
      }
    }

    .social {
      margin: 20px 0;
    }
  }
}

.blue {
  cursor: pointer;
  color: #37b4fd;
}
.red {
  cursor: pointer;
  color: red;
}
::v-deep.el-table .cell {
  text-align: center !important;
}
</style>